<template>
  <div class="testUser">
    <div class="function">
      <el-row>
        <el-form :model="queryCondition" label-width="150px" class="common-margin common-form" ref="form"
                 :rules="rules">
          <el-form-item label="First Name" prop="param.first_Name">
            <el-col :span="6">
              <el-input placeholder="First Name" v-model="queryCondition.param.first_Name"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="Last Name" prop="param.last_Name">
            <el-col :span="6">
              <el-input placeholder="Last Name" v-model="queryCondition.param.last_Name"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="Gender">
            <el-col :span="6">
              <el-select placeholder="Gender" v-model="queryCondition.param.gender">
                <el-option v-for="item in genderStatus" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="Hire Date">
            <el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" :editable="false"
                            v-model="queryCondition.param.hire_date_range" type="daterange" start-placeholder="start "
                            end-placeholder="end" default-value="1980-01-01">

            </el-date-picker>
          </el-form-item>
          <el-form-item label="Birth Date">
            <el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" :editable="false"
                            v-model="queryCondition.param.birth_date_range" type="daterange" start-placeholder="start"
                            end-placeholder="end" default-value="1950-01-01"></el-date-picker>


          </el-form-item>

          <el-form-item label="">

            <el-button type="primary" icon="el-icon-search" @click="getData()">查询</el-button>

            <el-button type="primary" @click="addEmployeeInfo()" icon="el-icon-circle-plus">增加</el-button>

          </el-form-item>

        </el-form>

      </el-row>

    </div>

    <div style="height: 10px; background-color: rgb(242, 242, 242);"></div>

    <div id="table">

      <el-table :data="pageList.items" stripe style="width: 100%" border>

        <el-table-column prop="emp_No" sortable label="No">

        </el-table-column>

        <el-table-column prop="first_Name" sortable label="First Name">

        </el-table-column>

        <el-table-column prop="last_Name" sortable label="Last Name">

        </el-table-column>

        <el-table-column prop="gender" sortable label="Gender">

        </el-table-column>

        <el-table-column prop="hire_Date_Display" sortable label="Hire Date">

        </el-table-column>

        <el-table-column prop="birth_Date_Display" sortable label="Birth Date">

        </el-table-column>


        <el-table-column label="操作">

          <template slot-scope="scope">

            <el-button

              @click="getDetail(scope.row)"

              type="primary"

              size="small" icon="el-icon-info">

            </el-button>

            <el-button

              @click="editEmployeeInfo(scope.row)"

              type="primary"

              size="small" icon="el-icon-edit">

            </el-button>

            <el-button

              @click="deleteEmployeeInfo(scope.row)"

              type="primary"

              size="small" icon="el-icon-delete">

            </el-button>

          </template>

        </el-table-column>

      </el-table>

      <div class="block">

        <el-pagination :data="pageList" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="queryCondition.pageInfo.pageIndex" :page-sizes="[10,100, 200, 300, 400]"
                       :page-size="queryCondition.pageInfo.pageSize" layout="total, sizes, prev, pager, next, jumper"

                       :total="pageList.totalCount">

        </el-pagination>

      </div>

    </div>

  </div>

</template>


<script>

  export default {

    data() {

      return {

        input: "",

        pageList: [],

        genderStatus: [{

          vale: "",

          label: ""

        },

          {

            value: "F",

            label: "Female"

          },

          {

            value: "M",

            label: "Male"

          }

        ],

        queryCondition: {


          param: {

            first_Name: "",

            last_Name: "",

            gender: "",

            hire_date_range: null,

            birth_date_range: null,


          },

          pageInfo: {

            pageIndex: 1,

            pageSize: 10

          }


        },

        rules: {

          'param.first_Name': [{

            required: false,

            message: "只允许字母或数字",

            pattern: /[a-zA-Z0-9]/

          }]

        }

      }

    },

    mounted: function () {

//debugger;

      this.getData();

    },

    methods: {

      handleSizeChange(val) {

//debugger;

//console.log(`每页 ${val} 条`);

        this.queryCondition.pageInfo.pageSize = val;

        this.getData();

      },

      handleCurrentChange(val) {

//debugger;

        this.queryCondition.pageInfo.pageIndex = val;

        this.getData();

      },

      getData() {

        let _self = this;

        _self.$refs["form"].validate(function (isValid) {

          if (isValid) {

            let url = "/Employee/query";

//debugger;

            _self.$http

              .post(url, _self.queryCondition)

              .then(function (response) {

//debugger;

//console.log(response.data.data);

                _self.pageList = response.data.data;


              })

              .catch(function (error) {

                console.log(error);

              });

          } else {

            return false;

          }

        })


      },

      hire_date_pick(maxDate, minDate) {

//debugger;

        alert(maxDate);

      },

      getDetail(currentRow) {


        this.$router.push({

          path: '/index/employee/detail/' + currentRow.emp_No

        });


      },

      editEmployeeInfo(currentRow) {

        this.$router.push({

          path: '/index/employee/edit/' + currentRow.emp_No

        });

      },

      deleteEmployeeInfo(currentRow) {

        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {

          confirmButtonText: '确定',

          cancelButtonText: '取消',

          type: 'warning'

        }).then(() => {

          let _self = this;

          let url = "/employee/delete/" + currentRow.emp_No;

//debugger;

          _self.$http

            .post(url)

            .then(function (response) {

//debugger;

//console.log(response.data.data);

              if (response.data.isSuccess) {

                _self.$message({

                  type: 'success',

                  message: '删除成功!'

                });


                _self.getData();

              } else {

                _self.$message.error("删除失败");

              }

            })

            .catch(function (error) {

              console.log(error);

            });


        }).catch(() => {

          this.$message({

            type: 'info',

            message: '已取消删除'

          });

        });

      },

      addEmployeeInfo() {


        this.$router.push({

          path: '/index/employee/add'

        });


      }

    }

  };

</script>


<style scoped>

  @import '/static/default.css';

</style>
